<template>
  <div>
    <el-form :inline="true" :model="selectForm" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="selectForm.name" placeholder="请输入名称"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="info" @click="getListByParams()" style="padding-left: 15px">查询</el-button>
      </el-form-item>
<!--      <el-form-item>-->
<!--        <el-button type="primary" @click="openWindow()" style="padding-left: 15px">新增</el-button>-->
<!--      </el-form-item>-->
    </el-form>

    <el-table
      v-loading="loading"
      :data="entityList"
      stripe
      style="width: 100%">

      <el-table-column
        prop="name"
        label="姓名"
        sortable
        fixed
        width="150">
      </el-table-column>
      <el-table-column
        prop="jobSearchStatus"
        label="工作状态"
        sortable
        width="100">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        sortable
        width="100">
      </el-table-column>
      <el-table-column
        prop="telephone"
        label="电话"
        sortable
        width="150">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        sortable
        width="150">
      </el-table-column>
      <el-table-column
        prop="idCardNo"
        label="身份证号"
        sortable
        :show-overflow-tooltip="true"
        width="200">
      </el-table-column>
      <el-table-column
        prop="national"
        label="民族"
        sortable
        width="150">
      </el-table-column>
      <el-table-column
        prop="registeredResidence"
        label="户籍"
        sortable
        width="150">
      </el-table-column>
      <el-table-column
        prop="cityOfResidence"
        label="居住地"
        sortable
        width="150">
      </el-table-column>
      <el-table-column
        prop="joinWorkingHours"
        label="参加工作时间"
        sortable
        width="150">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        sortable
        width="160">
      </el-table-column>

<!--      <el-table-column label="操作" width="180"-->
<!--                       fixed="right">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            @click="openWindow(scope.row.id)">编辑-->
<!--          </el-button>-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="danger"-->
<!--            @click="deleteMenu(scope.row.id)">删除-->
<!--          </el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <div style="text-align: right;padding-right: 5%;padding-top: 20px">
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>

    <!--  弹窗 : 新增/修改  -->
<!--    <el-dialog-->
<!--      :title="!insertAndUpdateForm.id ? '新增' : '修改'"-->
<!--      :visible.sync="insertAndUpdateVisible"-->
<!--    >-->
<!--      <el-form ref="insertAndUpdateForm" :model="insertAndUpdateForm" label-width="100px">-->
<!--        <el-form-item label="姓名：">-->
<!--          <el-input v-model="insertAndUpdateForm.name"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="性别：">-->
<!--          <template>-->
<!--            <el-radio v-model="insertAndUpdateForm.sex" label="m">男</el-radio>-->
<!--            <el-radio v-model="insertAndUpdateForm.sex" label="w">女</el-radio>-->
<!--            <el-radio v-model="insertAndUpdateForm.sex" label="o">性别不详</el-radio>-->
<!--          </template>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="手机号：">-->
<!--          <el-input v-model="insertAndUpdateForm.telephone"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="邮箱：">-->
<!--          <el-input v-model="insertAndUpdateForm.email"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="身份证：">-->
<!--          <el-input v-model="insertAndUpdateForm.idCardNo"></el-input>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="insertAndUpdateVisible = false">取 消</el-button>-->
<!--        <el-button type="primary" @click="insertAndUpdate()">确 定</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        insertAndUpdateVisible: false,
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        selectForm: {
          name: ''
        },
        entityList: [
          {
            id: "",
            name: "",
            sex: "",
            telephone: "",
            email: "",
            idCardNo: "",
            national: "",
            birthday: "",
            registeredResidence: "",
            cityOfResidence: "",
            jobSearchStatus: "",
            joinWorkingHours: "",
            status: ""
          }
        ],
        insertAndUpdateForm: {
          id: "",
          name: "",
          sex: "o",
          telephone: "",
          email: "",
          idCardNo: "",
          national: "",
          birthday: "",
          registeredResidence: "",
          cityOfResidence: "",
          jobSearchStatus: "",
          joinWorkingHours: "",
          status: ""

        }
      }
    },
    created() {
      this.getListByParams();
    },
    methods: {
      // 条件分页查询
      async getListByParams() {
        const {data: res} = await this.$http.get("/perInformation/getPageByParams"
          , {
            params: {
              page: this.pageIndex,
              limit: this.pageSize,
              name: this.selectForm.name
            }
          } )
        if (res.code !== 200) {
          return this.$message.error(res.msg)
        }
        this.entityList = res.entityList
        this.totalPage = res.total
        this.$message.success(res.msg)
      },
      // 打开弹窗
      async openWindow(id){
        this.insertAndUpdateForm = {}
        if (id){
          this.insertAndUpdateForm.id = id
        }else {
            this.insertAndUpdateForm.sex = 'o'
        }
        this.insertAndUpdateVisible = true;

      },
      // 新增或修改
      async insertAndUpdate() {


        this.insertAndUpdateVisible = false;
      },
      // 逻辑删除
      deleteMenu(id) {

      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getListByParams()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getListByParams()
      }
    }
  }
</script>

